<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Basic Controls in Mono Winforms</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Winforms, Mono, IronPython, basic controls, programming, tutorial">
<meta name="description" content="Basic Controls in Mono Winforms">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href=".." title="Home">Contents</a>


<h1>Basic Controls in Mono Winforms</h1>


<p>
This part of the IronPython Mono Winforms programming tutorial will 
be about basic controls. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
Winforms controls are basic building blocks of an application. 
Winforms has a wide range of various controls.
Buttons, check boxes, trackbars, labels etc. Everything a programmer 
needs for his job. In this section of the tutorial, we will describe 
several useful controls.
</p>


<h2>Label Control</h2>

<p>
<b class="keyword">Label</b> is a simple control for displaying text 
or images. It does not receive focus.
</p>

<div class="codehead">label.py</div>
<pre class="code">
#!/usr/bin/ipy

import sys
import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form, Label
from System.Drawing import Size, Point, Font


text = """Meet you downstairs in the bar and heard
Your rolled up sleeves and your skull t-shirt
You say why did you do it with him today?
And sniffed me out like I was tanqueray

Cause you're my fella, my guy
Hand me your stella and fly
By the time I'm out the door
You tear me down like roger moore

I cheated myself
Like I knew I would
I told ya, I was trouble
You know that I'm no good

Upstairs in bed, with my ex boy
He's in a place, but I cant get joy
Thinking of you in the final throws, this is when my buzzer goes"""


class IForm(Form):

    def __init__(self):

        self.Text = "You know I'm No Good"

        font = Font("Serif", 10)

        lyrics = Label()
        lyrics.Parent = self
        lyrics.Text = text
        lyrics.Font = font
        lyrics.Location = Point(10, 10)
        lyrics.Size = Size(290, 290)

        self.CenterToScreen()


Application.Run(IForm())
</pre>


<p>
In our example, we show some lyrics on the form.
</p>

<pre class="explanation">
 lyrics = Label()
</pre>

<p>
<b class="keyword">Label</b> control is created.
</p>

<pre class="explanation">
 text = """Meet you downstairs in the bar and heard 
           ... """
</pre>

<p>
This is our text. 
</p>

<pre class="explanation">
 font = Font("Serif", 10)
 ...
 lyrics.Font = font
</pre>

<p>
The font of the text of the label is set to Serif, 10px. 
</p>


<br>
<img src="/img/gui/ironpython/label.png" alt="Label">
<div class="figure">Figure: Label</div>


<h2>CheckBox</h2>

<p>
<b class="keyword">CheckBox</b> is a control that has two states. On and Off. 
It is a box with a label or an image. If the CheckBox is checked,
it is represented by a tick in a box.A CheckBox can be used to
show/hide splashscreen at startup, toggle visibility of a toolbar etc.
</p>

<div class="codehead">checkbox.py</div>
<pre class="code">
#!/usr/bin/ipy

import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form, CheckBox
from System.Drawing import Size, Point



class IForm(Form):

    def __init__(self):

        self.Text = "CheckBox"
        self.Size = Size(220, 170)

        cb = CheckBox()
        cb.Parent = self
        cb.Location = Point(30, 30)
        cb.Text = "Show Title"
        cb.Checked = True

        cb.CheckedChanged += self.OnChanged


        self.CenterToScreen()

    def OnChanged(self, sender, event):
        if sender.Checked:
            self.Text = "CheckBox"
        else:
            self.Text = ""
        
    
Application.Run(IForm())
</pre>

<p>
Our code example shows or hides the title of the window depending on it's state. 
</p>

<pre class="explanation">
 cb = CheckBox()
</pre>

<p>
<b class="keyword">CheckBox</b> control is created. 
</p>

<pre class="explanation">
 cb.Text = "Show Title"
 cb.Checked = True
</pre>

<p>
When the application starts, we show the title. And we set the
<b class="keyword">CheckBox</b> control to checked state. 
</p>

<pre class="explanation">
 cb.CheckedChanged += self.OnChanged
</pre>

<p>
When we click on the  <b class="keyword">CheckBox</b> control,
the <b class="keyword">CheckedChanged</b> event is triggered.
</p>

<pre class="explanation">
 if sender.Checked:
     self.Text = "CheckBox"
 else:
     self.Text = ""
</pre>

<p>
Here we toggle the title of the window.
</p>

<br>
<img src="/img/gui/ironpython/checkbox.png" alt="CheckBox">
<div class="figure">Figure: CheckBox</div>


<h2>TrackBar</h2>

<p>
<b class="keyword">TrackBar</b> is a component that lets the user graphically 
select a value by sliding a knob within a bounded interval.
Our example will show a volume control. 
</p>

<div class="codehead">trackbar.py</div>
<pre class="code">
#!/usr/bin/ipy

import sys
import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form, PictureBox
from System.Windows.Forms import TrackBar, TickStyle
from System.Drawing import Size, Point, Bitmap


class IForm(Form):

    def __init__(self):
        self.Text = 'TrackBar'
        self.Size = Size(260, 190)
      

        tb = TrackBar()
        tb.Parent = self
        tb.Size = Size(150, 30)
        tb.Location = Point(30, 50)
        tb.TickStyle = TickStyle.None
        tb.SetRange(0, 100)

        tb.ValueChanged += self.OnChanged

        self.LoadImages()

        self.pb = PictureBox()
        self.pb.Parent = self
        self.pb.Location = Point(210, 50)
        self.pb.Image = self.mutep
        
        self.CenterToScreen()


    def LoadImages(self):
        try:
            self.mutep = Bitmap("mute.png")
            self.minp = Bitmap("min.png")
            self.medp = Bitmap("med.png")
            self.maxp = Bitmap("max.png")
        except Exception, e:
            print "Error reading images"
            print e.msg
            sys.exit(1)
    


    def OnChanged(self, sender, event): 
        val = sender.Value

        if val == 0: 
            self.pb.Image = self.mutep
        elif val > 0 and val <= 30:
            self.pb.Image = self.minp
        elif val > 30 and val < 80:
            self.pb.Image = self.medp
        else: self.pb.Image = self.maxp



Application.Run(IForm())
</pre>

<p>
In the code example, we show a <b class="keyword">TrackBar</b> 
and a <b class="keyword">PictureBox</b>. By dragging the track bar, 
we change the image on the <b class="keyword">PictureBox</b> control. 
</p>


<pre class="explanation">
 tb = TrackBar()
</pre>

<p>
<b class="keyword">TrackBar</b> control is created.  
</p>

<pre class="explanation">
 tb.TickStyle = TickStyle.None
</pre>

<p>
We show no ticks for this <b class="keyword">TrackBar</b>.
</p>

<pre class="explanation">
 self.pb = PictureBox()
 ...
 self.pb.Image = self.mutep
</pre>

<p>
<b class="keyword">PictureBox</b> control is created. It is used to display an image.
At the start, it shows the mute image. 
</p>


<pre class="explanation">
 self.mutep = Bitmap("mute.png")
 self.minp = Bitmap("min.png")
 self.medp = Bitmap("med.png")
 self.maxp = Bitmap("max.png")
</pre>

<p>
Here we create four images, that we will use.
</p>

<pre class="explanation">
 val = sender.Value

 if val == 0: 
     self.pb.Image = self.mutep
 elif val > 0 and val <= 30:
     self.pb.Image = self.minp
 elif val > 30 and val < 80:
     self.pb.Image = self.medp
 else: self.pb.Image = self.maxp
</pre>

<p>
We determine the value of the <b class="keyword">TrackBar</b>.
Depending on its value, we update the <b class="keyword">PictureBox</b> control.
</p>


<br>
<img src="/img/gui/ironpython/trackbar.png" alt="TrackBar">
<div class="figure">Figure: TrackBar</div>


<h2>ComboBox</h2>

<p>
<b class="keyword">ComboBox</b> is a control that combines 
a button or editable field and a drop-down list.
The user can select a value from the drop-down list, 
which appears at the user's request. If you make the combo 
box editable, then the combo box includes an editable field 
into which the user can type a value.
</p>

<div class="codehead">combobox.py</div>
<pre class="code">
#!/usr/bin/ipy

import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form
from System.Windows.Forms import ComboBox, Label
from System.Drawing import Size, Point


class IForm(Form):

    def __init__(self):

        self.Text = "ComboBox"
        self.Size = Size(240, 240)

        cb = ComboBox()
        cb.Parent = self
        cb.Location = Point(50, 30)

        cb.Items.AddRange(("Ubuntu",
            "Mandriva",
            "Red Hat",
            "Fedora",
            "Gentoo"))

        cb.SelectionChangeCommitted += self.OnChanged

        self.label = Label()
        self.label.Location = Point(50, 140)
        self.label.Parent = self
        self.label.Text = "..."


        self.CenterToScreen()

    def OnChanged(self, sender, event):
         self.label.Text = sender.Text
    
    
Application.Run(IForm())
</pre>

<p>
Our code programming example shows a combobox with five items. The selected
item is shown in a label control. 
</p>


<pre class="explanation">
 cb = ComboBox()
</pre>

<p>
<b class="keyword">ComboBox</b> control is created. 
</p>


<pre class="explanation">
 cb.Items.AddRange(("Ubuntu",
     "Mandriva",
     "Red Hat",
     "Fedora",
     "Gentoo"))
</pre>

<p>
The <b class="keyword">ComboBox</b> control is filled with items. 
</p>

<pre class="explanation">
 cb.SelectionChangeCommitted += self.OnChanged
</pre>

<p>
If we select an item from the combobox, the <b class="keyword">SelectionChangeCommitted</b> event
is triggered. 
</p>

<pre class="explanation">
 def OnChanged(self, sender, event):
     self.label.Text = sender.Text
</pre>

<p>
Here the selected text from the combobox is copied to the label. 
</p>

<br>
<img src="/img/gui/ironpython/combobox.png" alt="ComboBox">
<div class="figure">Figure: ComboBox</div>

<hr class="btm">

<p>
We have finished chapter of the IronPython Mono Winforms tutorial, dedicated to basic controls. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br>

<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>

<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified January 29, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>



